<template>
  <div id="search">
    <i class="bi bi-search"></i>
    <input
      type="text"
      placeholder="按内容搜索"
      @keypress.enter="goSearch(kw)"
      v-model="kw"
    />
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Search } from "../util/request/api";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      kw: "",
      itemList: [],
    };
  },
  methods: {
    goSearch(kw) {
      Search(kw)
        .then((res) => {
          if (res.code != 200) {
            Dialog({ message: "请输入关键字" });
            return;
          }
          if (res.list == null) {
            res.list = [];
          }
          this.itemList = res.list;
          this.changeAction(this.itemList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    ...mapActions(["changeAction"]),
  },
  computed: {
    ...mapGetters(["getItemList"]),
  },
};
</script>

<style scoped>
#search {
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.5);
  width: 3.75rem;
  height: 0.52rem;
  padding: 0.1rem;
  position: fixed;
  top: 0.44rem;
  z-index: 10;
}
#search input {
  background: #ffffff;
  border: 0.01rem solid #e6e6e6;
  border-radius: 0.03rem;
  width: 100%;
  height: 0.32rem;
  font-size: 0.14rem;
  text-indent: 2em;
}
#search i {
  position: absolute;
  top: 0.15rem;
  left: 0.18rem;
  font-size: 0.16rem;
  color: #999999;
}
</style>